<template>
    <div>
        <div :class='$style.shares'>
            <a-table bordered :pagination='false' :dataSource='taskList' :columns='sharesColumns'>
                <template #bodyCell='{ record, column }'>
                    <template v-if='column.dataIndex ==="params"'>
                        <div :class='$style.param'>
                            <template v-for='(v, k) in record.params'>
                                <div :class='$style.item'>
                                    <div :class='$style.paramName'>{{k}}</div>
                                    <div :class='$style.paramValue'>{{v}}</div>
                                </div>
                            </template>
                        </div>
                    </template>
                    <!-- <template v-else-if='column.dataIndex ==="progress"'>
                        <a-progress size='small' status='active' :percent='record.progress' />
                    </template> -->
                </template>
            </a-table>
        </div>

    <div :class='$style.backTestSet'>
        <div style='flex:1'>设置： {{backTestSet.start_date}} 到 {{backTestSet.end_date}}， {{backTestSet.cash}}
            &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;状态：<a-tag>{{backTestSet.status_text}}</a-tag><!-- <XBackTestStatus :status='backTestSet.status' /> -->
            &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;基准：{{backTestSet.benchmark}}
        </div>
    </div>
    </div>

    <div :class='$style.detailContainer'>
        <BackTestDetail :profitSummary='profitSummary' :transactionDetail='transactionDetail' :position='position' :strategyProfit='strategyProfit' :benchmarkProfit='benchmarkProfit' @change='selectedTap' />
    </div>

</template>

<script lang='ts' setup>
    import { useRoute } from 'vue-router'
    import { tradeDetailApi, profitSummaryApi, transactionDetailApi, positionApi, strategyProfitApi, benchmarkProfitApi } from '@/api/strategyFollow'
    import BackTestDetail from '../BackTestDetail/index.vue'
    import { onBeforeUnmount, onMounted, reactive, ref } from 'vue'
    import { TRANS } from '@/constant'
    
    const route = useRoute()

    const sharesColumns:any[] = [
        {title : '股票名称', dataIndex : 'code_name', align : 'center'},
        {title : '策略名称', dataIndex : 'strategy_name', align : 'center'},
        {title : '金额', dataIndex : '金额', align : 'center'},
        {title : '参数', dataIndex : 'params', align : 'center'},
        // {title : '进度', dataIndex : 'progress', align : 'center'},
    ]
    const sharesDataSource:any[] = []

    const packageId = route.params.id
    let timer = null
    const backTestSet = reactive({
        start_date : '---',
        end_date : '---',
        cash : '---',
        status : '',
        status_text : '',
        benchmark : '---'
    })
    const taskList = reactive<any[]>([])

    const profitSummary = ref<any>(null)
    const transactionDetail = ref<any>(null)
    const position = ref<any>(null)
    const strategyProfit = ref<any>(null)
    const benchmarkProfit = ref<any>(null)
    

    profitSummaryApi({package_id : packageId}).then(data => { //获取收益概述
        backTestSet.cash = data.cash
        backTestSet.status = data.status
        backTestSet.status_text = data.status == 1 ? '进行中' : '结束'
        backTestSet.start_date = data.start_date
        backTestSet.end_date = data.end_date
        
        const profitSummaryTemp = {
            summary : [],
            chart : {
                xAxis : [],
                series : [[], []],

            }
        }

        for(let k in data) {
            if(['benchmark_cum_returns', 'strategy_cum_returns', 'status', 'status_text'].includes(k)) continue
            profitSummaryTemp.summary.push({name : TRANS[k], value : data[k]})
        }

        for(let time in data.benchmark_cum_returns) {
            profitSummaryTemp.chart.series[0].push([time, data.benchmark_cum_returns[time]])
        } 

        for(let time in data.strategy_cum_returns) {
            profitSummaryTemp.chart.series[1].push([time, data.strategy_cum_returns[time]])
        } 

        profitSummaryTemp.chart.xAxis.push(...Object.keys(data.strategy_cum_returns))

        profitSummary.value = profitSummaryTemp

    })

    async function selectedTap(key) {
        if(key == 2) {
            if(transactionDetail.value == null) {
                const data = await transactionDetailApi({package_id : packageId})
                transactionDetail.value = data || []
            }
        }else if(key == 3) {
            if(position.value == null) {
                const data = await positionApi({package_id : packageId})
                position.value = data || []
            }
        }else if(key == 4) {
            if(strategyProfit.value == null) {
                const data = await strategyProfitApi({package_id : packageId})
                strategyProfit.value = data || []
            }
        }else if(key == 5) {
            if(benchmarkProfit.value == null) {
                const data = await benchmarkProfitApi({package_id : packageId})
                benchmarkProfit.value = data || []
            }
        }
    }

    tradeDetailApi({package_id : packageId}).then(res => { //获取顶部的
        if(res.success) {
            const data = res.data
            backTestSet.start_date = data.start_date
            backTestSet.end_date = data.end_date
            backTestSet.benchmark = data.benchmark
            taskList.push(...data.strategy_list.map(task => {
                task.progress = 0
                return task
            }))
        }

        // timer = setInterval(() => {
        //     combinationBackTestTaskProgressApi({package_id : packageId}).then(data => {
        //         if(data.every(v => v.run_status == 5)) { //如果所有都为5了，则停止
        //             clearInterval(timer)
        //         }
        //         for(let i = 0; i < taskList.length; i ++) {
        //             taskList[i].progress = data[i].run_status * 20
        //         }
        //     })
        // }, 1000)
    })


    

</script>


<style lang='scss' module>
    .backTestSet{
        padding: $space;
        font-size: 14px;
        display: flex;
        align-items: center;
    }

    .shares{
        text-align: center;
        padding: 0 $space 0 $space;
        :global(.ant-descriptions-item-label) {
            text-align: center;
        }
    }
    .param {
        text-align: center;
        display: inline-flex;
        gap: 10px;
        .paramName{
            font-size: 12px;
            color: #8c8c8c;
        }
        .paramValue{
            font-size: 14px;
            font-weight: 700;
            color: #666;
        }
    }
    
</style>